<template>
    <div class="bg-white goods_create" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <router-link :to="{ path: './list' }" style="position: absolute;top: 12px;left: 200px;">
            <el-button size="mini">回到商品列表</el-button>
        </router-link>

        <el-form ref="form" label-width="80px" class="ml-4 mt-4">
            <el-form-item label="商品类型">
                <el-select v-model="goods_type_id" placeholder="请选择商品类型" @change="change">
                    <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-card class="box-card ml-4" style="width: 700px;">
            <div slot="header" class="clearfix">
                <span>商品属性</span>
            </div>
            <el-form label-width="80px">
                <el-form-item :label="item.name" v-for="(item, index) in goods_type_values" :key="index">
                    <el-input v-model="item.value" v-if="item.type === 'input'">{{ item }}</el-input>
                    <el-radio-group v-model="item.value" v-else-if="item.type === 'radio'">
                        <el-radio v-for="(item2, index2) in item.default" :label="item2" :key="index2">{{ item2
                        }}</el-radio>
                    </el-radio-group>
                    <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="item.value">
                        <el-checkbox v-for="(item2, index2) in item.default" :label="item2" :key="index2"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </el-card>
        <el-button text="primary" style="position: fixed; bottom: 50px; right: 50px;" @click="submit">
            提交
        </el-button>
    </div>
</template>
<script>


export default {
    name: "goodsAttr",
    inject: ['app', 'layout'],

    data() {
        return {
            goods_type_id: '',
            typeOptions: [],
            phone_model: 'rwqrqw',
            goods_type_values: '',
        }
    },
    created() {
        this.id = this.$route.params.id
        if (!this.id) {
            this.$message.error('非法参数')
            return this.$router.push({
                name: 'shop-goods-list'
            })
        }
        this.layout.showLoading()
        // 初始化操作
        this.$axios.get('/admin/goods/read/' + this.id, { token: true }).then((res) => {
            // console.log(data);
            let data = res.data.data
            // this.banners = data.goodsBanners
            this.goods_type_values = data.goodsAttrs.map(item => {
                if (item.type !== 'input') {
                    item.default = item.default.split(',')
                }
                return item
            })
            this.typeOptions = data.types
            this.layout.hideLoading()
        }).catch(() => {
            this.layout.hideLoading()
        })

    },
    computed: {

    },
    // 测试是否vuex能够访问skus_type
    mounted() {

    },
    methods: {
        change(id) {
            let index = this.typeOptions.findIndex(item => item.id === id)
            if (index === -1) {
                return this.goods_type_values = []
            }
            let options = this.typeOptions[index].goods_type_values

            this.goods_type_values = options.map(item => {
                let defaultValue = []
                if (item.type !== 'input') {
                    defaultValue = item.default ? item.default.split(',') : []
                }

                return {
                    goods_id: this.id,
                    value: "",
                    name: item.name,
                    default: defaultValue,
                    type: "input"
                }
            })
        },
        submit() {
            this.layout.showLoading()
            this.$axios.post('/admin/goods/attrs/' + this.id, {
                goods_attrs: this.goods_type_values.map(item => {

                    if (item.type !== 'input') {
                        item.default = item.default.join(',')
                    }
                    return item
                })
            }, {
                token: true
            }).then(() => {
                this.layout.hideLoading()
                this.$message.success('修改成功')
                return this.$router.push({
                    name: 'shop-goods-list'
                })
                
            }).then(() => {
                this.layout.hideLoading()
            })
        }
    }
}

</script>
<style>
.goods_create .el-form-item {
    margin-bottom: 10px;
}
</style>